<template>
  <div style="height: 100vh; background: #e8e8e8">
    <div class="title">我有想法</div>
    <van-form id="detail" @submit="onSubmit" style="background: rgb(232, 232, 232)">
      <van-field v-model="type" name="类型" :disabled="disabled" label="类型" placeholder="类型" :rules="[{ required: true, message: '请填写类型' }]" />

      <van-field name="switch" label="匿名">
        <!-- <template #input> -->
        <van-switch slot="input" :disabled="ifdisabled" v-model="isAnonymous" size="20" />
        <!-- </template> -->
      </van-field>
      <van-field v-model="userName" name="姓名" v-if="!isAnonymous" :disabled="true" label="投诉人姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
      <van-field v-model="userName" name="姓名" v-if="isAnonymous" type="password" :disabled="true" label="投诉人姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
      <van-field v-model="mobile" type="tel" :disabled="true" label="联系方式" v-if="!isAnonymous" placeholder="联系方式" :rules="[{ required: true, message: '请填写联系方式' }]" />
      <van-field v-model="mobile" type="password" :disabled="true" v-if="isAnonymous" label="联系方式" placeholder="联系方式" :rules="[{ required: true, message: '请填写联系方式' }]" />
      <van-field v-model="gettime" :disabled="true" label="反馈日期" placeholder="反馈日期" />
      <van-field v-if="ifdisabled" v-model="feedbackSystem" :disabled="true" label="反馈平台" placeholder="反馈平台" />
      <van-field readonly v-if="!ifdisabled" clickable name="picker" :value="feedbackSystem" label="反馈平台" @blur="onBlur" placeholder="反馈平台" @click="showTable = true" />

      <van-popup v-model="showTable" position="bottom">
        <van-picker show-toolbar :columns="tableList" value-key="name" @confirm="onConfirmTable" @cancel="showTable = false" />
      </van-popup>
      <van-field v-model="elseTable" v-if="ifElseTable" :disabled="ifdisabled" @blur="onBlur" label="其他平台说明" placeholder="其他平台说明" />
      <van-field v-model="informerCode" label="账号名称" :disabled="ifdisabled" placeholder="旺旺号/微信号/抖音号/小红书号等" />
      <van-field v-if="ifdisabled" v-model="brandName" :disabled="true" label="涉及品牌" placeholder="涉及品牌" />
      <van-field readonly v-if="!ifdisabled" clickable name="picker" :value="brandName" label="涉及品牌" @blur="onBlur" placeholder="涉及品牌" @click="showBrand = true" />

      <van-popup v-model="showBrand" position="bottom">
        <van-picker show-toolbar :columns="brandList" value-key="name" @confirm="onConfirmBrand" @cancel="showBrand = false" />
      </van-popup>
      <van-field name="uploader" label="首页截图">
        <template #input>
          <!-- <van-uploader
              v-model="fileList"
              :disabled="ifdisabled"
              :after-read="afterRead"
              multiple
              class="upload"
              :max-count="1"
            /> -->
          <div style="width: 100%">
            <!--     //getUploadParams（） 获取请求头  //  fileXcxImageChange 拿到图片路径 //fileList拼接路径-->
            <Upload style="display: flex; flex-wrap: wrap; width: 100%" :uploadParams="getUploadParams()" :accept="'image/*'" @fileChange="fileXcxImageChange" v-model="fileList"></Upload>
          </div>
        </template>
      </van-field>
      <!-- :rules="[{ required: true, message: '请上传货源信息' }]" -->
      <van-field name="uploader" label="货源信息">
        <!-- <template #input>
            <van-uploader
            :disabled="ifdisabled"
              v-model="fileList2"
              :after-read="afterRead2"
              multiple
            />
          </template> -->

        <template #input>
          <div style="width: 100%">
            <Upload
              style="display: flex; flex-wrap: wrap; width: 100%"
              :uploadParams="getUploadParams()"
              :isMultiple="true"
              :number="5"
              :uploadht="uploadht"
              @fileChange="fileChange"

              v-model="fileList2"
            ></Upload>
          </div>
        </template>
      </van-field>
      <van-field v-model="minPriceInfo" @blur="onBlur" rows="2" autosize :disabled="ifdisabled" label="销售说明" type="textarea" class="info" maxlength="500" placeholder="销售说明" show-word-limit />

      <van-field v-model="content" rows="4" autosize label="内容" :disabled="ifdisabled" @blur="onBlur" type="textarea" maxlength="500" placeholder="内容" show-word-limit />
      <div style="margin: 16px">
        <van-button round block v-if="!ifdisabled" type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div class="next">
      <van-list>
        <van-cell v-for="item in list.feedBackReplyList" :key="item.id">
          <van-row type="flex" justify="end" style="border-bottom: 1px solid #dcdfe6; margin-bottom: 10px">
            <van-col :span="6" style="color: #faad14; text-align: end"> No:{{ item.id }} </van-col>
          </van-row>
          <van-row class="row2"> 时间:{{ item.createTime }} </van-row>
          <van-row class="row2"> 处理部门:{{ item.deparmentName }} </van-row>
          <van-row class="row2">
            <span v-if="item.rType == 'A'"> 回复状态:受理人 </span>
            <span v-if="item.rType == 'Q'"> 回复状态:举报人 </span>
          </van-row>
          <van-row class="row2" v-if="item.mainStatus">
            <span v-if="item.mainStatus == 0"> 受理状态:处理中 </span>
            <span v-if="item.mainStatus == 1"> 受理状态:已处理 </span>
          </van-row>
          <van-row class="row2"> 回复内容:{{ item.rcontent }} </van-row>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>
  <script>
import { Notify } from 'vant'
import { axios } from '@/utils/request'
import Upload from '@/components/qiniuUpload/Upload.vue'
import globalData from '@/assets/js/common'

export default {
  components: {
    Upload
  },
  data() {
    return {
      userName: this.$route.query.userName ? this.$route.query.userName : '',
      mobile: this.$route.query.mobile ? this.$route.query.mobile : '',
      id: this.$route.query.id ? this.$route.query.id : '',
      status: this.$route.query.status ? this.$route.query.status : '',
      replyStatus: this.$route.query.replyStatus ? this.$route.query.replyStatus : '',
      type: '',
      isAnonymous: false,
      content: '',
      elseTable: '',
      ifElseTable: '',
      informerCode: '',
      minPriceInfo: '',
      brandName: '',
      newLifePhotos: [],
      uploadht: {
        token: 'jnbyimg',
        tokenKey: 'text/i/',
        uploadHost: 'http://jnbyimg.jnby.com/'
      },
      brandList: ['JNBY', '速写', 'jnbybyJNBY', 'LESS', '蓬马', 'JNBYHOME', 'APN', '其他'],
      showBrand: false,
      showTable: false,
      feedbackSystem: '',
      disabled: false,
      list: {},
      ifdisabled: false,
      tableList: ['淘宝（含天猫/1688/闲鱼）', '微信（含小程序)', '小红书', '抖音', '微博', '其他'],
      gettime: '',
      fileList: [],
      fileList2: [],
      productInfoList: [],
      indexPic: ''
    }
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    },
   
  },
  created: function () {
    document.title = '员工反馈'
    this.type = '线上非授权销售投诉'
    if (this.id) {
      this.getDetail()
      this.disabled = true
      if (this.status != '处理中' || this.replyStatus == '驳回') {
        this.ifdisabled = true
      }
    }
    setInterval(this.getTime, 500)
  },
  mounted() {},
  methods: {
    onBlur() {
      window.scroll(0, 0)
    },
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      _this.gettime = yy + '-' + mm + '-' + dd
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData()
      formData.append('file', file.file)
      const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
      try {
        axios({
          url: apiBaseUrl + '/api/gateway/basemgt-feedback/feedback/upload2Qny',
          method: 'post',
          data: formData,
          contentType: false
          // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
        }).then(res => {
          if (res.code == 200) {
            console.log(res.data.url)
            this.indexPic = res.data.url
          } else {
            file.status = 'failed'
            file.message = '上传失败'
            if (res.msg) {
              this.$toast('图片上传失败！' + res.msg)
            }
          }
        })
      } catch (error) {}
    },
    afterRead2(file) {
      // 此时可以自行将文件上传至服务器
      const formData = new FormData()
      formData.append('file', file.file)
      const apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
      try {
        axios({
          url: apiBaseUrl + '/api/gateway/basemgt-feedback/feedback/upload2Qny',
          method: 'post',
          data: formData,
          contentType: false
          // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
        }).then(res => {
          if (res.code == 200) {
            this.fileList2.map(item => {
              if (item.content == file.content) {
                item.url = res.data.url
              }
            })
          } else {
            file.status = 'failed'
            file.message = '上传失败'
            if (res.msg) {
              this.$toast('图片上传失败！' + res.msg)
            }
          }
        })
      } catch (error) {}
    },
    fileChange(list) {
      this.newLifePhotos = list
    },
    //   拿到图片路径
    fileXcxImageChange(list) {
      console.log(list)
      this.indexPic = list[0].url
      console.log(this.indexPic)
    },
    onConfirmTable(value) {
      this.feedbackSystem = value
      this.showTable = false
      if (value == '其他') {
        this.ifElseTable = true
      } else {
        this.ifElseTable = false
      }
      // this.area = value.id
    },
    onConfirmBrand(value) {
      this.brandName = value
      this.showBrand = false
    },
    // 获取请求头
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    onSubmit(values) {
      console.log('submit', values)
      if (!this.feedbackSystem) {
        this.$toast('请选择反馈平台')
      } else if (!this.elseTable && this.ifElseTable) {
        this.$toast('请选择其他平台说明')
      } else if (!this.informerCode) {
        this.$toast('请填写账号名称')
      } else if (!this.brandName) {
        this.$toast('请选择涉及品牌')
      } else if (!this.indexPic) {
        this.$toast('请上传首页截图')
      } else if (!this.newLifePhotos.length) {
        this.$toast('请上传货源信息')
      } else if (!this.minPriceInfo) {
        this.$toast('请输入销售说明')
      } else if (!this.content) {
        this.$toast('请输入内容')
      } else {
        this.newLifePhotos.map(item => {
          this.productInfoList.push(item.url)
        })
        const params = {
          linkId: this.linkId,
          type: 4,
          isAnonymous: values.switch ? 1 : 0,
          userName: this.userName,
          mobile: this.mobile,
          content: this.content,
          feedbackDate: this.gettime,
          feedbackSystem: this.feedbackSystem,
          elseTable: this.elseTable,
          informerCode: this.informerCode,
          brandName: this.brandName,
          indexPic: this.indexPic,
          minPriceInfo: this.minPriceInfo,
          productInfoList: this.productInfoList
        }
        if (this.id) {
          params.id = this.id
        }
        const api = this.id ? '/api/gateway/basemgt-feedback/feedback/update' : '/api/gateway/basemgt-feedback/feedback/save'
        this.$http({
          url: api,
          method: 'post',
          data: params
        }).then(data => {
          if (data.code == 200) {
            Notify({ type: 'success', message: '提交成功！' })
            this.$router.go(-1)
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      }
    },
    getDetail() {
      const params = {
        id: this.id
      }
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/getFeedbackReplyDetail',
          method: 'get',
          params: params
        }).then(res => {
          if (res.code == 200) {
            this.type = '线上非授权销售投诉'
            this.list = res.data
            this.userName = res.data.userName
            this.mobile = res.data.mobile
            this.indexPic = res.data.indexPic
            this.minPriceInfo = res.data.minPriceInfo
            this.isAnonymous = res.data.isAnonymous == 0 ? false : true
            this.brandName = res.data.brandName
            this.content = res.data.content
            this.fileList = res.data.indexPic
            this.fileList2 = res.data.productInfoList
            console.log(res.data.productInfoList)
            this.feedbackSystem = res.data.feedbackSystem
            this.informerCode = res.data.informerCode
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
  <style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
  <style>
#detail .van-field--disabled .van-field__label {
  color: #646566;
}
</style>